<template>
  <div class="horn-bar">
    <img
      class="horn-icon"
      src="~resources/good_news.png"
      alt=""
      mode="aspectFill"
    />
    <div class="swiper-horn-container">
      <div class="swiper-wrapper">
        <div
          class="swiper-slide b-swiper-slide"
          v-for="(item, index) in list"
          :key="index"
        >
          <span
            class="horn-swiper-txt"
            @click="bannerClick(item, 'notice', index)"
          >
            {{ item.content }}</span
          >
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Swiper from 'swiper/js/swiper.js';
import 'swiper/css/swiper.css';

export default {
  name: 'hornSwiper',
  data() {
    return {
      mySwiper: null,
      hornSwiperOption: {
        autoplay: {
          delay: 2000, // 自动切换的时间间隔，单位ms
          waitForTransition: true, // 等待过渡完毕。自动切换会在slide过渡完毕后才开始计时。
        },
        direction: 'vertical',
        loop: true,
        allowTouchMove: false,
      },
    };
  },
  props: {
    list: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  methods: {
    initSwiper() {
      this.mySwiper = new Swiper(
        '.swiper-horn-container',
        this.hornSwiperOption,
      );
    },
    bannerClick(item, type, index) {
      this.$emit('bannerClick', item, type, index);
    },
  },
  mounted() {
    this.initSwiper();
  },
};
</script>

<style lang="scss" scoped>
/*horn*/
.horn-bar {
  position: relative;
  background-color: #fff;
  padding-top: 17px;
  padding-left: 54px;
  padding-right: 16px;
  padding-bottom: 18px;
  ::v-deep  .b-swiper-slide.swiper-slide{
    height: 16px;
}
}

.horn-icon {
  position: absolute;
  left: 16px;
  top: 15px;
  width: 34px;
  height: 18px;
}

.swiper-horn-container {
  text-align: left !important;
  height: 16px !important;
  line-height: 16px !important;
  overflow: hidden;
}

.horn-swiper-txt {
  display: block;
  text-align: left;
  color: #762b00;
  font-size: 14px;
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  lines: 1;
}

</style>
